<template>
    <div class="order">
        <div class="order-header">
            <div class="time">
                {{data.time|timeFormat('yyyy-MM-dd hh:mm')}}
            </div>
            <div class="state">
                {{data.state?'待收货':'已完成'}}
            </div>
        </div>
        <div class="order-foods">
            <div class="food" v-for="(food,index) in data.foods" :key="index">
                <img class="img" src="../../commom/image/default.jpg">
                <div class="content">
                    <h3 class="title">{{food.name}}</h3>
                    <div class="describe">{{food.describe}}</div>
                    <div class="price-number">
                        <div class="price">
                            ￥{{food.price}}
                        </div>
                        <div class="number">
                            X{{food.number}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="payment-amount">
            <span class="discount">
                优惠金额： ￥{{0.00|numFilter(2)}}
            </span>
            <span class="amount-paid">
                实付金额： ￥{{data.payment|numFilter(2)}}
            </span>
        </div>
        <div class="operate-content">
            <button class="white" type="button" @click="gotoDetail(data.id)">订单详情</button>
        </div>
    </div>
</template>

<script type="text/ecamscript-6">
import timeFormat from "@/commom/js/timeFormat";
import numFilter from "@/commom/js/numFilter";
export default {
    data() {
        return {

        }
    },
    props: {
        data: {
            type: Object,
            default: {}
        }
    },
    filters: {
        timeFormat,
        numFilter
    },
    methods: {
        gotoDetail(id) {
            this.$router.push({
                path: `/orderDetail/${id}`
            })
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~commom/stylus/mixin'
.order
    padding 0 15px
    .order-header
        height 45px
        display flex
        justify-content space-between
        align-items center
        font-size 14px
        .time
            color #333333
        .state
            color #f20c00
    .order-foods
        .food
            padding 10px 0
            border-top 1px solid #eeeeee
            display flex
            .img
                flex 0 0 105px
                width 105px
                height 70px
                margin-right 15px
            .content
                flex 1
                .title
                    color #333
                    font-size 15px
                    font-weight bold
                .describe
                    color #666
                    font-size 13px
                    line-height 16px
                    height 32px
                    line-hidden(2)
                    margin 5px 0
                .price-number
                    display flex
                    justify-content space-between
                    align-items center
                    .price
                        color #f20c00
                        font-size 12px
                    .number
                        font-size 13px
                        color #333333
    .payment-amount
        overflow hidden
        height 45px
        border-bottom 1px solid #eeeeee
        border-top 1px solid #eeeeee
        line-height 45px
        color #333333
        font-size 13px
        .discount
            margin-right 30px
    .operate-content
        display flex
        justify-content flex-end
        padding 10px 0
        button
            height 30px
            width 91px
            text-align center
            border none
            outline none
            border-radius 20px
            font-size 13px
            &.red
                background-color #f20c00
                color #ffffff
            &.white
                margin-left 16px
                background-color #ffffff
                border 1px solid #333333
                color #333333
</style>
